<script setup lang="ts">
// ----------------------- 导入相关依赖 -----------------------
import { nextTick, onMounted, onUnmounted, reactive, ref, computed } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import SysDialog from "@/components/dialog/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import useInstance from "@/hooks/useInstance";
import { ConveyorPricing, ConveyorPricingListParam, ExportFieldInfo, ConveyorPricingBatchCopyDto } from "@/api/conveyorPricing/type";
import { addApi, editApi, deleteApi, batchDeleteApi, getListApi, getDetial, importConveyorPricing, exportConveyorPricing, exportCustomConveyorPricing, getExportFields, downloadTemplate, updateStatusApi, batchUpdateStatusApi, batchCopyApi } from "@/api/conveyorPricing";
import { getSimpleProject, getSimpleProjectAll, getProjectDocumentListApi } from "@/api/project"; // 导入获取项目列表的API
import { ProjectDocument, ProjectDocumentListParam } from "@/api/project/type";
import ArchiveSelector from "@/components/common/ArchiveSelector.vue";
import { getListApi as getDictListApi } from "@/api/sysDictData"; // 导入获取字典列表的API
import { SysDictData, SysDictDataListParam } from "@/api/sysDictData/type"; // 导入获取字典列表的API

import { Search, Refresh, Plus, Edit, Delete, Document, InfoFilled, Setting, Switch, ScaleToOriginal, View, Download, Upload, Check, Close, CopyDocument } from '@element-plus/icons-vue'
import { formatPrice, formatNumber } from '@/utils/formatter'
import dayjs from 'dayjs'

// 定义项目接口类型
interface Project {
  id: number;
  name: string;
}

// ----------------------- 组件状态定义 -----------------------
const { dialog, onShow, onClose } = useDialog()
const { global } = useInstance()

// 表格高度自适应
const tableHeight = ref(0)

// 项目列表
const projectList = ref<Project[]>([])

// 项目选择器相关
const projectSelectorVisible = ref(false)
const selectedProject = ref<ProjectDocument | null>(null)

// 项目选择器搜索字段配置
const projectSearchFields = [
  { label: '项目名称', prop: 'name', type: 'input' as const },
  { label: '项目编号', prop: 'code', type: 'input' as const },
  { label: '客户名称', prop: 'customer', type: 'input' as const },
  {
    label: '项目状态',
    prop: 'status',
    type: 'select' as const,
    options: [
      { value: 0, label: '进行中' },
      { value: 1, label: '已完成' },
      { value: 2, label: '已暂停' },
      { value: 3, label: '已取消' },
    ],
  },
]

// 项目选择器表格列配置
const projectTableColumns = [
  { prop: 'name', label: '项目名称', width: 250 },
  { prop: 'code', label: '项目编号', width: 250 },
  { prop: 'customer', label: '客户名称', width: 250 },
  { prop: 'manager', label: '项目经理', width: 200 },
]

// 获取项目列表数据的API方法
const getProjectListForSelector = async (params: any) => {
  try {
    // 构建查询参数
    const queryParams: ProjectDocumentListParam = {
      name: params.name,
      code: params.code,
      customer: params.customer,
      status: params.status,
      page: params.page || 1,
      limit: params.limit || 10,
    }

    // 调用项目列表API
    return await getProjectDocumentListApi(queryParams)
  } catch (error) {
    console.error('获取项目列表失败:', error)
    return { data: { list: [], total: 0 } }
  }
}

// 打开项目选择器
const openProjectSelector = () => {
  projectSelectorVisible.value = true
}

// 处理项目选择确认
const handleProjectSelect = (project: ProjectDocument) => {
  selectedProject.value = project
  searchForm.project = project.name
}

// 类型列表
const typeList = ref<SysDictData[]>([])

// 可导出字段列表
const exportFieldList = ref<ExportFieldInfo[]>([])

// 自定义导出弹窗状态
const exportDialog = reactive({
  visible: false
})

// 选中的导出字段
const selectedExportFields = ref<string[]>([])

// 字段搜索文本
const fieldSearchText = ref('')

// 过滤后的导出字段列表
const filteredExportFields = computed(() => {
  if (!fieldSearchText.value) {
    return exportFieldList.value
  }
  return exportFieldList.value.filter(field => 
    field.displayName.toLowerCase().includes(fieldSearchText.value.toLowerCase()) ||
    field.fieldName.toLowerCase().includes(fieldSearchText.value.toLowerCase())
  )
})

// 切换字段选中状态
const toggleField = (fieldName: string) => {
  const index = selectedExportFields.value.indexOf(fieldName)
  if (index > -1) {
    selectedExportFields.value.splice(index, 1)
  } else {
    selectedExportFields.value.push(fieldName)
  }
}

// ----------------------- 表格相关 -----------------------
const tableData = ref<ConveyorPricing[]>([])
const loading = ref(false)
const paginationData = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

// 批量删除相关
const selectedRows = ref<ConveyorPricing[]>([])
const tableRef = ref()

// 批量复制相关
const batchCopyVisible = ref(false)
const targetProjectSelectorVisible = ref(false)
const selectedTargetProject = ref<ProjectDocument | null>(null)

const dateForm = reactive<ConveyorPricing>({
  id: undefined,
  project: undefined,  // 项目
  type: undefined,  // 类型
  chang: undefined,
  wide: undefined,
  high: undefined,
  outrigger: undefined,
  mechanicalPrice: undefined,
  gearMotor: undefined,
  sum: undefined,
  pricing: undefined,
  weight: undefined,
  idDomestic: undefined,
  number: undefined,
  isDelete: undefined,
  createTime: undefined,
  updateTime: undefined,
  ratio: undefined
})

// ----------------------- 查询表单相关 -----------------------
const searchForm = reactive<ConveyorPricingListParam>({
  project: undefined,  // 项目
  type: undefined,  // 类型
  chang: undefined,
  wide: undefined,
  high: undefined,
  weight: undefined,
  idDomestic: undefined,
  number: undefined,
  activate: undefined,
  page: 1,
  limit: 10
})

// 添加查看弹窗状态
const viewDialog = reactive({
  visible: false,
  title: '查看输送件核价',
  width: 600,
  height: 500
})

// 查看表单数据
const viewForm = reactive<any>({
  id: undefined,
  project: undefined,
  type: undefined,
  chang: undefined,
  wide: undefined,
  high: undefined,
  outrigger: undefined,
  mechanicalPrice: undefined,
  gearMotor: undefined,
  sum: undefined,
  pricing: undefined,
  weight: undefined,
  idDomestic: undefined,
  number: undefined,
  isDelete: undefined,
  createTime: undefined,
  updateTime: undefined,
  ratio: undefined
})

// 查询方法
const search = () => {
  paginationData.currentPage = 1
  getTableData()
}

// 重置查询
const reset = () => {
  selectedProject.value = null
  searchForm.project = undefined
  searchForm.type = undefined
  searchForm.chang = undefined
  searchForm.wide = undefined
  searchForm.high = undefined
  searchForm.weight = undefined
  searchForm.idDomestic = undefined
  searchForm.number = undefined
  searchForm.activate = undefined
  search()
}

// 修改输送件核价的状态
const updateStatus = reactive({
  id: undefined as number | undefined,
  activate: undefined as boolean | undefined
})

// 标志位：防止初始化时触发
const isDataLoaded = ref(false)

// 激活 失效
const activateChange = async (val: boolean, id: number) => {
  // 如果数据还没加载完成，不执行更新操作
  if (!isDataLoaded.value) return
  
  updateStatus.id = id
  updateStatus.activate = val
  try {
    await updateStatusApi({ id, activate: val ? 1 : 0 })
    ElMessage.success('操作成功')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// ----------------------- 表格数据处理 -----------------------
const getTableData = async () => {
  loading.value = true
  isDataLoaded.value = false // 数据加载开始，设置标志位为false
  try {
    searchForm.page = paginationData.currentPage
    searchForm.limit = paginationData.pageSize
    let res = await getListApi(searchForm)
    if (res && res.data) {
      tableData.value = res.data.list
      paginationData.total = res.data.total
    }
    // 使用nextTick确保DOM更新完成后再设置标志位
    await nextTick()
    isDataLoaded.value = true // 数据加载完成，设置标志位为true
  } catch (error) {
    console.error('获取表格数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取项目列表
const getProjectList = async () => {
  try {
    const res = await getSimpleProjectAll()
    if (res && res.data) {
      projectList.value = res.data
    }
  } catch (error) {
    console.error('获取项目列表失败:', error)
  }
}
// 获取类型列表
const getTypeList = async () => {
  try {
    const res = await getDictListApi({
        dictType: 'ConveyorType',
        dictLabel: "",
        status: undefined,
        page: 0,
        limit: 100
    })
    if (res && res.data) {
      typeList.value = res.data.list || []
    }
  } catch (error) {
    console.error('获取类型列表失败:', error)
  }
}

// 获取可导出字段列表
const getExportFieldList = async () => {
  try {
    const res = await getExportFields()
    if (res && res.data) {
      exportFieldList.value = res.data
      // 默认选中所有字段
      selectedExportFields.value = res.data.map((field: ExportFieldInfo) => field.fieldName)
    }
  } catch (error) {
    console.error('获取可导出字段列表失败:', error)
  }
}

// ----------------------- 新增/编辑表单相关 -----------------------
const addFormRef = ref<FormInstance>()
const addForm = reactive<ConveyorPricing>({
  id: undefined,
  project: undefined,  // 项目
  type: undefined,  // 类型
  chang: undefined,
  wide: undefined,
  high: undefined,
  outrigger: undefined,
  mechanicalPrice: undefined,
  gearMotor: undefined,
  sum: undefined,
  pricing: undefined,
  weight: undefined,
  idDomestic: undefined,
  number: undefined,
  isDelete: undefined,
  createTime: undefined,
  updateTime: undefined,
  ratio: undefined
})

// 自动计算合计
const calculateSum = async () => {

  if(addForm.high !== undefined && addForm.wide !== undefined && addForm.chang !== undefined){
    try {
      const res = await getDetial(addForm)
      if(res && res.data){
        addForm.outrigger = res.data.outrigger
        addForm.mechanicalPrice = res.data.mechanicalPrice
        addForm.gearMotor = res.data.gearMotor

        // 检查是否有基础数据维护警告
        if(res.data.dataMaintainWarnings && res.data.dataMaintainWarnings.length > 0) {
          const warningMsg = '基础数据维护提醒：\n' + res.data.dataMaintainWarnings.join('\n')
          ElMessage.warning({
            message: warningMsg,
            duration: 8000,  // 延长显示时间
            showClose: true,
            dangerouslyUseHTMLString: false
          })
          console.warn('【基础数据维护提醒】', res.data.dataMaintainWarnings)
        }
      }
    } catch (error: any) {
      // 处理后端返回的基础数据维护提醒异常
      let errorMessage = '计算失败'
      if (error?.response?.data?.message) {
        errorMessage = error.response.data.message
      } else if (error?.message) {
        errorMessage = error.message
      }
      
      if (errorMessage.includes('【基础数据维护提醒】')) {
        ElMessage.warning({
          message: errorMessage,
          duration: 10000,  // 基础数据提醒延长显示时间
          showClose: true,
          dangerouslyUseHTMLString: false
        })
      } else {
        ElMessage.error({
          message: errorMessage,
          duration: 5000,
          showClose: true
        })
      }
      console.error('计算详细信息失败:', error)
    }
  }

  let sum = 0

  

  
  if (addForm.mechanicalPrice) {
    sum += Number(addForm.mechanicalPrice)
  }
  
  if (addForm.gearMotor) {
    sum += Number(addForm.gearMotor)
  }
  
  addForm.sum = sum

  addForm.pricing = Math.round(addForm.sum * (addForm.ratio || 1.1) * 100) / 100
}

// 监听值变化
const handleValueChange = () => {
  calculateSum()
}

// 表单校验规则
const rules = {
  project: [{ required: true, message: '请选择项目', trigger: 'change' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  chang: [{ required: true, message: '请输入长度', trigger: 'blur' }],
  wide: [{ required: true, message: '请输入宽度', trigger: 'blur' }],
  high: [{ required: true, message: '请输入高度', trigger: 'blur' }]
}

// 打开新增弹框
const openAdd = () => {
  dialog.title = '新增输送件核价'
  dialog.width = 600
  dialog.height = 500
  onShow()
}

// 打开编辑弹框
const openEdit = (row: ConveyorPricing) => {
  // 检查记录的状态
  if (row.activate === 0) {
    ElMessage.warning('该输送件核价已失效，不允许编辑')
    return
  }
  
  dialog.title = '编辑输送件核价'
  dialog.width = 600
  dialog.height = 500
  nextTick(() => {
    Object.assign(addForm, row)
  })
  onShow()
}

// 打开查看弹窗
const openView = (row: ConveyorPricing) => {
  viewDialog.visible = true
  nextTick(() => {
    Object.assign(viewForm, row)
  })
}

// 关闭弹框
const closeDialog = () => {
  addFormRef.value?.resetFields()
  Object.assign(addForm, {
    id: undefined,
    project: undefined,
    type: undefined,
    chang: undefined,
    wide: undefined,
    high: undefined,
    outrigger: undefined,
    mechanicalPrice: undefined,
    gearMotor: undefined,
    sum: undefined,
    pricing: undefined,
    weight: undefined,
    idDomestic: undefined,
    number: undefined,
    isDelete: undefined,
    createTime: undefined,
    updateTime: undefined,
    ratio: undefined
  })
  onClose()
}

// 关闭查看弹窗
const closeViewDialog = () => {
  viewDialog.visible = false
  Object.assign(viewForm, {
    id: undefined,
    project: undefined,
    type: undefined,
    chang: undefined,
    wide: undefined,
    high: undefined,
    outrigger: undefined,
    mechanicalPrice: undefined,
    gearMotor: undefined,
    sum: undefined,
    pricing: undefined,
    weight: undefined,
    idDomestic: undefined,
    number: undefined,
    isDelete: undefined,
    createTime: undefined,
    updateTime: undefined,
    ratio: undefined
  })
}

// 提交表单
const submit = async () => {
  await addFormRef.value?.validate()
  try {
    if (addForm.id) {
      await editApi(addForm)
      ElMessage.success('编辑成功')
    } else {
      await addApi(addForm)
      ElMessage.success('新增成功')
    }
    getTableData()
    closeDialog()
  } catch (error) {
    console.error('提交失败:', error)
  }
}

// ----------------------- 删除相关 -----------------------
const deleteOne = async (id: number) => {
  // 检查记录的状态
  const record = tableData.value.find(item => item.id === id)
  if (record && record.activate === 0) {
    ElMessage.warning('该输送件核价已失效，不允许删除')
    return
  }
  
  const confirm = await global.$myConfirm('确定要删除该记录吗？')
  if (confirm) {
    try {
      await deleteApi(id)
      ElMessage.success('删除成功')
      if (tableData.value.length === 1 && paginationData.currentPage > 1) {
        paginationData.currentPage--
      }
      getTableData()
    } catch (error) {
      console.error('删除失败:', error)
    }
  }
}

// 处理表格选择变化
const handleSelectionChange = (selection: ConveyorPricing[]) => {
  selectedRows.value = selection
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }

  // 检查选中的记录中是否有已失效的
  const invalidRecords = selectedRows.value.filter(item => item.activate === 0)
  if (invalidRecords.length > 0) {
    ElMessage.warning(`选中的记录中有${invalidRecords.length}条已失效，不允许删除操作`)
    return
  }

  const confirm = await global.$myConfirm(`确定要删除选中的 ${selectedRows.value.length} 条数据吗？`)
  if (confirm) {
    try {
      const ids = selectedRows.value.map(row => row.id!).filter(id => id)
      const response = await batchDeleteApi(ids)
      
      if (response.code === 200) {
        ElMessage.success('批量删除成功')
        getTableData()
        // 清空选择
        tableRef.value?.clearSelection()
      } else {
        ElMessage.error(response.message || '批量删除失败')
      }
    } catch (error) {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 批量失效
const handleBatchDeactivate = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择需要失效的记录')
    return
  }
  
  try {
    await global.$myConfirm(`确定要将选中的${selectedRows.value.length}条记录设为失效吗？`)
    const ids = selectedRows.value.map(row => row.id!).filter(id => id)
    await batchUpdateStatusApi({ ids, activate: 0 })
    ElMessage.success('批量失效成功')
    getTableData()
    // 清空选择
    tableRef.value?.clearSelection()
  } catch (error) {
    console.error('批量失效失败:', error)
    ElMessage.error('批量失效失败')
  }
}

// 批量生效
const handleBatchActivate = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择需要生效的记录')
    return
  }
  
  try {
    await global.$myConfirm(`确定要将选中的${selectedRows.value.length}条记录设为生效吗？`)
    const ids = selectedRows.value.map(row => row.id!).filter(id => id)
    await batchUpdateStatusApi({ ids, activate: 1 })
    ElMessage.success('批量生效成功')
    getTableData()
    // 清空选择
    tableRef.value?.clearSelection()
  } catch (error) {
    console.error('批量生效失败:', error)
    ElMessage.error('批量生效失败')
  }
}

// ----------------------- 批量复制相关 -----------------------
// 打开批量复制弹窗
const openBatchCopyDialog = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择需要复制的记录')
    return
  }
  
  // 允许复制失效数据，复制后自动生效
  
  batchCopyVisible.value = true
}

// 关闭批量复制弹窗
const closeBatchCopyDialog = () => {
  batchCopyVisible.value = false
  selectedTargetProject.value = null
}

// 打开目标项目选择器
const openTargetProjectSelector = () => {
  targetProjectSelectorVisible.value = true
}

// 处理目标项目选择
const handleTargetProjectSelect = (project: ProjectDocument) => {
  selectedTargetProject.value = project
  console.log('选择的目标项目:', project)
}

// 获取项目列表(用于批量复制)
const getProjectListForBatchCopy = async (params: any) => {
  try {
    const queryParams: ProjectDocumentListParam = {
      page: params.page || 1,
      limit: params.limit || 10,
      name: params.name || '',
      code: params.code || '',
      customer: params.customer || '',
      status: params.status || ''
    }
    const res = await getProjectDocumentListApi(queryParams)
    // ArchiveSelector期望的数据格式
    return {
      data: {
        list: res.data?.list || [],
        total: res.data?.total || 0
      }
    }
  } catch (error) {
    console.error('获取项目列表失败:', error)
    return { 
      data: {
        list: [], 
        total: 0 
      }
    }
  }
}

// 确认批量复制
const confirmBatchCopy = async () => {
  if (!selectedTargetProject.value) {
    ElMessage.warning('请选择目标项目')
    return
  }
  
  try {
    await global.$myConfirm(`确定要将选中的${selectedRows.value.length}条输送件核价复制到项目"${selectedTargetProject.value.name}"吗？`)
    
    const sourceIds = selectedRows.value.map(row => row.id).filter(id => id !== undefined) as number[]
    await batchCopyApi({
      sourceIds,
      targetProject: selectedTargetProject.value.name!
    })
    
    ElMessage.success(`成功复制${sourceIds.length}条输送件核价`)
    closeBatchCopyDialog()
    getTableData()
    // 清空选择
    tableRef.value?.clearSelection()
  } catch (error) {
    console.error('批量复制失败:', error)
    ElMessage.error('批量复制失败')
  }
}

// ----------------------- 导入导出相关 -----------------------
// 导入Excel文件
const fileInputRef = ref<HTMLInputElement | null>(null)

// 处理文件导入
const handleImport = () => {
  if (fileInputRef.value) {
    fileInputRef.value.click()
  }
}

// 处理文件选择事件
const handleFileChange = async (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const file = target.files[0]
    
    try {
      loading.value = true
      await importConveyorPricing(file)
      ElMessage.success('导入成功')
      getTableData() // 刷新表格数据
    } catch (error) {
      console.error('导入失败:', error)
      ElMessage.error('导入失败，请检查文件格式')
    } finally {
      loading.value = false
      // 重置文件输入，允许重复选择相同文件
      if (fileInputRef.value) {
        fileInputRef.value.value = ''
      }
    }
  }
}

// 导出Excel（根据当前查询条件导出）
const handleExport = async () => {
  try {
    loading.value = true
    searchForm.limit = 9999

    await exportConveyorPricing(searchForm)
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败')
  } finally {
    loading.value = false
  }
}

// 打开自定义导出弹窗
const openExportDialog = () => {
  exportDialog.visible = true
}

// 关闭自定义导出弹窗
const closeExportDialog = () => {
  exportDialog.visible = false
}

// 全选/取消全选导出字段
const handleSelectAllFields = (checked: boolean) => {
  if (checked) {
    selectedExportFields.value = exportFieldList.value.map(field => field.fieldName)
  } else {
    selectedExportFields.value = []
  }
}

// 确认自定义导出
const confirmCustomExport = async () => {
  if (selectedExportFields.value.length === 0) {
    ElMessage.warning('请至少选择一个导出字段')
    return
  }
  
  try {
    loading.value = true
    
    // 构建导出参数，去掉分页参数
    const { page, limit, ...exportParams } = searchForm
    
    // 过滤掉空值和undefined
    const cleanedParams = Object.keys(exportParams).reduce((acc, key) => {
      const value = (exportParams as any)[key]
      if (value !== undefined && value !== null && value !== '') {
        (acc as any)[key] = value
      }
      return acc
    }, {})
    
    // 构建导出请求对象
    const exportRequest = {
      fields: selectedExportFields.value,
      searchParam: cleanedParams
    }
    
    console.log('导出请求参数:', exportRequest)
    console.log('选中的字段:', selectedExportFields.value)
    console.log('查询条件:', cleanedParams)
    
    // 检查是否有查询条件
    const hasConditions = Object.keys(cleanedParams).length > 0
    
    if (hasConditions) {
      console.log('自定义导出-按查询条件导出数据:', cleanedParams)
      ElMessage.info('正在导出符合当前查询条件的数据...')
    } else {
      console.log('自定义导出-导出全部数据')
      ElMessage.info('正在导出全部数据...')
    }

    await exportCustomConveyorPricing(exportRequest)
    ElMessage.success('导出成功')
    closeExportDialog()
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败')
  } finally {
    loading.value = false
  }
}

// 下载导入模板
const handleDownloadTemplate = async () => {
  try {
    loading.value = true
    await downloadTemplate()
    ElMessage.success('模板下载成功')
  } catch (error) {
    console.error('模板下载失败:', error)
    ElMessage.error('模板下载失败')
  } finally {
    loading.value = false
  }
}

// ----------------------- 生命周期钩子 -----------------------
onMounted(() => {
  getProjectList() // 获取项目列表
  getTypeList() // 获取类型列表
  getExportFieldList() // 获取可导出字段列表
  getTableData()
  nextTick(() => {
    tableHeight.value = window.innerHeight - 260
  })
})

// 监听窗口大小变化
const handleResize = () => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 260
  })
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 根据项目ID获取项目名称
const getProjectName = (projectId: number | undefined) => {
  if (!projectId) return ''
  const project = projectList.value.find(item => item.id === projectId)
  return project ? project.name : ''
}

// 根据类型值获取类型标签
const getTypeName = (typeValue: string | undefined) => {
  if (!typeValue) return ''
  const type = typeList.value.find(item => item.dictValue === typeValue)
  return type ? type.dictLabel : ''
}
</script>

<template>
  <div class="container">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <div class="search-wrapper">
        <!-- 搜索表单区域 -->
        <div class="search-form-section">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="项目名称">
              <el-input 
                :model-value="selectedProject ? selectedProject.name : ''"
                placeholder="请选择项目"
                readonly
                class="selector-input"
                style="width: 220px"
              >
                <template #append>
                  <el-button @click="openProjectSelector" v-permission="['conveyorPricing:view']">选择</el-button>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="类型">
              <el-select 
                v-model="searchForm.type" 
                placeholder="请选择类型" 
                clearable 
                filterable
                style="width: 200px"
              >
                <el-option 
                  v-for="item in typeList" 
                  :key="item.dictLabel" 
                  :label="item.dictLabel" 
                  :value="item.dictLabel" 
                />
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select 
                v-model="searchForm.activate"
                placeholder="是否生效"
                clearable
                style="width: 120px"
              >
                <el-option label="生效" :value="1" />
                <el-option label="失效" :value="0" />
              </el-select>
            </el-form-item>

            <el-form-item class="search-buttons">
              <el-button type="primary" @click="search" class="search-btn" v-permission="['conveyorPricing:view']">
                <el-icon><Search /></el-icon>
                查询
              </el-button>
              <el-button @click="reset" class="reset-btn" v-permission="['conveyorPricing:view']">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="action-buttons-section">
          <div class="button-group"></div>
          <div class="button-group">
            <el-button type="success" @click="openAdd" class="add-btn" v-permission="['conveyorPricing:edit']">
              <el-icon><Plus /></el-icon>
              新增
            </el-button>
            <el-button 
              type="danger" 
              @click="handleBatchDelete" 
              class="batch-delete-btn"
              :disabled="selectedRows.length === 0"
              v-permission="['conveyorPricing:edit']"
            >
              <el-icon><Delete /></el-icon>
              批量删除 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
            </el-button>
            <el-button 
              type="warning" 
              @click="handleBatchDeactivate" 
              class="batch-deactivate-btn"
              :disabled="selectedRows.length === 0"
              v-permission="['conveyorPricing:edit']"
            >
              <el-icon><Close /></el-icon>
              批量失效 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
            </el-button>
            <el-button 
              type="success" 
              @click="handleBatchActivate" 
              class="batch-activate-btn"
              :disabled="selectedRows.length === 0"
              v-permission="['conveyorPricing:edit']"
            >
              <el-icon><Check /></el-icon>
              批量生效 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
            </el-button>
            <el-button 
              type="primary" 
              @click="openBatchCopyDialog" 
              class="batch-copy-btn"
              :disabled="selectedRows.length === 0"
              v-permission="['conveyorPricing:edit']"
            >
              <el-icon><CopyDocument /></el-icon>
              批量复制 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
            </el-button>
            <el-button @click="handleDownloadTemplate" class="template-btn" v-permission="['conveyorPricing:view']">
              <el-icon><Download /></el-icon>
              下载模板
            </el-button>
            <el-button @click="handleImport" class="import-btn" v-permission="['conveyorPricing:edit']">
              <el-icon><Upload /></el-icon>
              导入
            </el-button>
            <el-button @click="handleExport" class="export-btn" v-permission="['conveyorPricing:view']">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
            <el-button @click="openExportDialog" class="custom-export-btn" v-permission="['conveyorPricing:view']">
              <el-icon><Setting /></el-icon>
              自定义导出
            </el-button>
          </div>
        </div>

        <!-- 隐藏的文件输入框 -->
        <input
          type="file"
          ref="fileInputRef"
          style="display: none"
          accept=".xlsx, .xls"
          @change="handleFileChange"
        />
      </div>
    </el-card>

    <!-- 数据列表 -->
    <el-card class="list-card" shadow="never">
      <el-table 
        ref="tableRef"
        v-loading="loading"
        :data="tableData"
        :height="tableHeight"
        element-loading-text="加载中..."
        element-loading-background="rgba(255, 255, 255, 0.7)"
        style="width: 100%"
        stripe
        border
        @selection-change="handleSelectionChange"
      >
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column type="index" label="序号" width="70" align="center"/>
          <el-table-column prop="activate" label="状态" min-width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.activate ? 'success' : 'danger'">
            {{ scope.row.activate ? '生效' : '失效' }}
          </el-tag>
        </template>
      </el-table-column>
          <el-table-column prop="project" label="项目" min-width="100" align="center"/>

          <el-table-column prop="type" label="类型" min-width="100" align="center"/>
          <el-table-column prop="outrigger" label="支腿" min-width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.outrigger ? formatNumber(scope.row.outrigger) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="mechanicalPrice" label="机械单价" min-width="120" align="center">
            <template #default="scope">
              <span class="price-value">{{ scope.row.mechanicalPrice ? formatPrice(scope.row.mechanicalPrice) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="gearMotor" label="减速电机" min-width="120" align="center">
            <template #default="scope">
              <span class="price-value">{{ scope.row.gearMotor ? formatPrice(scope.row.gearMotor) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量" min-width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.weight ? formatNumber(scope.row.weight) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idDomestic" label="是否国产" min-width="100" align="center">
            <template #default="scope">
              {{ scope.row.idDomestic === '0' ? '国产' : scope.row.idDomestic === '1' ? '非国产' : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="number" label="数量" min-width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.number ? formatNumber(scope.row.number) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sum" label="采购成本价" min-width="120" align="center">
            <template #default="scope">
              <span class="price-value">{{ scope.row.sum ? formatPrice(scope.row.sum) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pricing" label="出厂价" min-width="120" align="center">
            <template #default="scope">
              <span class="price-value">{{ scope.row.pricing ? formatPrice(scope.row.pricing) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ratio" label="毛利系数" min-width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.ratio ? formatNumber(scope.row.ratio) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span class="date-value">{{ scope.row.createTime ? dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createName" label="创建人" min-width="120" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.createName || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" min-width="180" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span class="date-value">{{ scope.row.updateTime ? dayjs(scope.row.updateTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateName" label="更新人" min-width="120" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.updateName || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" fixed="right" align="center">
            <template #default="scope">
              <div class="action-buttons">
                <el-button type="info" size="small" @click="openView(scope.row)" class="view-btn" :icon="View" v-permission="['conveyorPricing:view']">
                  查看
                </el-button>
                <el-button type="primary" size="small" @click="openEdit(scope.row)" class="edit-btn" :icon="Edit" :disabled="scope.row.activate === 0" v-permission="['conveyorPricing:edit']">
                  编辑
                </el-button>
                <el-button type="danger" size="small" @click="deleteOne(scope.row.id)" class="delete-btn" :icon="Delete" :disabled="scope.row.activate === 0" v-permission="['conveyorPricing:edit']">
                  删除
                </el-button>
                <!-- <el-switch v-model="scope.row.activate"
                           class="ml-2"
                           inline-prompt
                           style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;margin-left: 15px"
                           active-text="生效"
                           inactive-text="失效"
                           :active-value="1"
                           :inactive-value="0"
                           @change="activateChange($event === 1,scope.row.id)" /> -->
              </div>
            </template>
          </el-table-column>
        </el-table>

      <!-- 分页区域 -->
      <div class="pagination">
        <el-pagination 
          v-model:current-page="paginationData.currentPage"
          v-model:page-size="paginationData.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="paginationData.total"
          @current-change="getTableData"
          @size-change="getTableData"
        />
      </div>
    </el-card>

      <!-- 新增/编辑弹框 -->
    <sys-dialog
      :title="dialog.title"
      :width="dialog.width"
      :visible="dialog.visible"
      :height="dialog.height"
      @onClose="closeDialog"
      @onConfirm="submit"
      custom-class="conveyor-pricing-dialog"
    >
      <template #content>
        <el-form
          ref="addFormRef"
          :model="addForm"
          :rules="rules"
          label-width="100px"
          class="conveyor-pricing-form"
        >
          <el-card class="form-card" shadow="never">
            <template #header>
              <div class="form-header">
                <el-icon><Document /></el-icon>
                <span>基本信息</span>
              </div>
            </template>
            <el-form-item label="项目" prop="project">
              <el-select 
                v-model="addForm.project" 
                placeholder="请选择项目" 
                clearable 
                filterable
                style="width: 100%"
              >
                <el-option 
                  v-for="item in projectList" 
                  :key="item.name" 
                  :label="item.name" 
                  :value="item.name" 
                />
              </el-select>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-select 
                v-model="addForm.type" 
                placeholder="请选择类型" 
                clearable 
                filterable
                style="width: 100%"
              >
                <el-option 
                  v-for="item in typeList" 
                  :key="item.dictLabel" 
                  :label="item.dictLabel" 
                  :value="item.dictLabel" 
                />
              </el-select>
            </el-form-item>
            <el-form-item label="长" prop="chang">
              <el-input 
                v-model="addForm.chang" 
                placeholder="请输入长度" 
                @input="handleValueChange"
              />
            </el-form-item>
            <el-form-item label="宽" prop="wide">
              <el-input 
                v-model="addForm.wide" 
                placeholder="请输入宽度" 
                @input="handleValueChange"
              />
            </el-form-item>
            <el-form-item label="高" prop="high">
              <el-input 
                v-model="addForm.high" 
                placeholder="请输入高度" 
                @input="handleValueChange"
              />
            </el-form-item>
            <el-form-item label="重量">
              <el-input 
                v-model="addForm.weight" 
                placeholder="请输入重量" 
                @input="handleValueChange"

              />
            </el-form-item>
            <el-form-item label="数量">
              <el-input 
                v-model="addForm.number" 
                placeholder="请输入数量" 
                @input="handleValueChange"

              />
            </el-form-item>
            <el-form-item label="是否国产">
              <el-select 
                v-model="addForm.idDomestic" 
                placeholder="请选择是否国产" 
                clearable 
                style="width: 100%"
                @change="handleValueChange"
              >
                <el-option label="国产" value="0" />
                <el-option label="非国产" value="1" />
              </el-select>
            </el-form-item>

          </el-card>

          
          <el-card class="form-card" shadow="never">
            <template #header>
              <div class="form-header">
                <el-icon><InfoFilled /></el-icon>
                <span>核价信息</span>
              </div>
            </template>
            <el-form-item label="支腿">
              <el-input 
                v-model="addForm.outrigger" 
                placeholder="自动计算" disabled
                
              />
            </el-form-item>
            <el-form-item label="机械单价">
              <el-input 
                v-model="addForm.mechanicalPrice" 
                placeholder="自动计算" disabled 
               
              />
            </el-form-item>
            <el-form-item label="减速电机">
              <el-input 
                v-model="addForm.gearMotor" 
                placeholder="自动计算" disabled

              />
            </el-form-item>

            <el-form-item label="采购成本价">
              <el-input v-model="addForm.sum" placeholder="自动计算" disabled />
            </el-form-item>
            <el-form-item label="毛利系数" prop="ratio">
              <el-input-number 
                v-model="addForm.ratio" 
                :precision="2" 
                :step="0.01" 
                :min="1" 
                placeholder="请输入毛利系数" 
                style="width: 100%" 
                :model-value="addForm.ratio || 1.1"
                @input="handleValueChange"
              />
            </el-form-item>
            <el-form-item label="出厂价">
              <el-input v-model="addForm.pricing" placeholder="自动计算" disabled />
            </el-form-item>
          </el-card>

        </el-form>
      </template>
    </sys-dialog>

    <!-- 查看弹框 -->
    <el-dialog
      v-model="viewDialog.visible"
      :title="viewDialog.title"
      :width="viewDialog.width"
      custom-class="conveyor-pricing-dialog view-dialog"
    >
      <el-form
        :model="viewForm"
        label-width="100px"
        class="conveyor-pricing-form"
      >
        <el-card class="form-card" shadow="never">
          <template #header>
            <div class="form-header">
              <el-icon><Document /></el-icon>
              <span>基本信息</span>
            </div>
          </template>
          <el-form-item label="项目">
            <el-input v-model="viewForm.project" disabled />
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="viewForm.type" disabled />
          </el-form-item>
          <el-form-item label="长">
            <el-input v-model="viewForm.chang" disabled />
          </el-form-item>
          <el-form-item label="宽">
            <el-input v-model="viewForm.wide" disabled />
          </el-form-item>
          <el-form-item label="高">
            <el-input v-model="viewForm.high" disabled />
          </el-form-item>
        </el-card>

        <el-card class="form-card" shadow="never">
          <template #header>
            <div class="form-header">
              <el-icon><InfoFilled /></el-icon>
              <span>核价信息</span>
            </div>
          </template>
          <el-form-item label="支腿">
            <el-input v-model="viewForm.outrigger" disabled />
          </el-form-item>
          <el-form-item label="机械单价">
            <el-input v-model="viewForm.mechanicalPrice" disabled />
          </el-form-item>
          <el-form-item label="减速电机">
            <el-input v-model="viewForm.gearMotor" disabled />
          </el-form-item>
          <el-form-item label="重量">
            <el-input v-model="viewForm.weight" disabled />
          </el-form-item>
          <el-form-item label="是否国产">
            <el-input :value="viewForm.idDomestic === '0' ? '国产' : viewForm.idDomestic === '1' ? '非国产' : viewForm.idDomestic" disabled />
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="viewForm.number" disabled />
          </el-form-item>
          <el-form-item label="采购成本价">
            <el-input v-model="viewForm.sum" disabled />
          </el-form-item>
          <el-form-item label="毛利系数">
            <el-input v-model="viewForm.ratio" disabled />
          </el-form-item>
          <el-form-item label="出厂价">
            <el-input v-model="viewForm.pricing" disabled />
          </el-form-item>

        </el-card>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeViewDialog">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 自定义导出弹框 -->
    <el-dialog
      v-model="exportDialog.visible"
      title=""
      :width="680"
      custom-class="export-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <template #header>
        <div class="export-dialog-header">
          <div class="header-left">
            <el-icon class="header-icon"><Setting /></el-icon>
            <div>
              <div class="header-title">自定义导出设置</div>
              <div class="header-subtitle">选择您需要导出的数据字段</div>
            </div>
          </div>
          <div class="selected-count">
            已选择 {{ selectedExportFields.length }} / {{ exportFieldList.length }} 项
          </div>
        </div>
      </template>
      
      <div class="export-content">
        <div class="export-toolbar">
          <div class="toolbar-left">
            <el-button 
              size="small" 
              type="primary" 
              :icon="Switch"
              @click="handleSelectAllFields(true)"
              :disabled="selectedExportFields.length === exportFieldList.length"
            >
              全选
            </el-button>
            <el-button 
              size="small" 
              :icon="Refresh"
              @click="handleSelectAllFields(false)"
              :disabled="selectedExportFields.length === 0"
            >
              清空
            </el-button>
          </div>
          <div class="toolbar-right">
            <el-input
              v-model="fieldSearchText"
              size="small"
              placeholder="搜索字段..."
              :prefix-icon="Search"
              clearable
              style="width: 200px"
            />
          </div>
        </div>
        
        <div class="field-list-container">
          <div class="field-grid">
            <div 
              v-for="field in filteredExportFields" 
              :key="field.fieldName"
              class="field-card"
              :class="{ 'selected': selectedExportFields.includes(field.fieldName) }"
              @click="toggleField(field.fieldName)"
            >
              <div class="field-card-content">
                                 <el-checkbox 
                   :model-value="selectedExportFields.includes(field.fieldName)"
                   @change="() => toggleField(field.fieldName)"
                   @click.stop=""
                   class="field-checkbox"
                 />
                <div class="field-info">
                  <div class="field-name">{{ field.displayName }}</div>
                  <div class="field-key">{{ field.fieldName }}</div>
                </div>
                <div class="field-icon">
                  <el-icon v-if="selectedExportFields.includes(field.fieldName)" class="check-icon">
                    <Check />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
          
          <div v-if="filteredExportFields.length === 0" class="empty-state">
            <el-icon class="empty-icon"><Search /></el-icon>
            <div class="empty-text">未找到匹配的字段</div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="export-footer">
          <div class="footer-info">
            <el-icon><InfoFilled /></el-icon>
            <span>将按当前查询条件导出选中字段的数据</span>
          </div>
          <div class="footer-buttons">
            <el-button @click="closeExportDialog" size="large">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
            <el-button 
              type="primary" 
              @click="confirmCustomExport" 
              :loading="loading"
              size="large"
              :disabled="selectedExportFields.length === 0"
            >
              <el-icon><Download /></el-icon>
              导出 Excel
            </el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 项目选择器组件 -->
    <ArchiveSelector v-model="projectSelectorVisible"
                     title="选择项目"
                     :search-fields="projectSearchFields"
                     :table-columns="projectTableColumns"
                     :fetch-data-api="getProjectListForSelector"
                     :multiple="false"
                     @confirm="handleProjectSelect" />

    <!-- 批量复制弹窗 -->
    <el-dialog 
      v-model="batchCopyVisible" 
      title="批量复制输送件核价" 
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="batch-copy-content">
        <div class="copy-info">
          <el-icon class="info-icon"><InfoFilled /></el-icon>
          <span>即将复制 <strong>{{ selectedRows.length }}</strong> 条输送件核价记录到目标项目</span>
        </div>
        
        <div class="target-project-section">
          <label class="section-label">选择目标项目：</label>
          <div class="project-selector">
            <el-input
              :model-value="selectedTargetProject ? selectedTargetProject.name : ''"
              placeholder="请选择目标项目"
              readonly
              class="project-input"
            >
              <template #append>
                <el-button @click="openTargetProjectSelector">选择项目</el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeBatchCopyDialog">取 消</el-button>
          <el-button type="primary" @click="confirmBatchCopy" :disabled="!selectedTargetProject">
            确定复制
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 目标项目选择器 -->
    <ArchiveSelector
      v-model="targetProjectSelectorVisible"
      title="选择目标项目"
      :fetch-data-api="getProjectListForBatchCopy"
      :search-fields="projectSearchFields"
      :table-columns="projectTableColumns"
      @confirm="handleTargetProjectSelect"
    />
  </div>
</template>

<style scoped lang="scss">
.container {
  background: #f5f7fa;
  padding: 20px;
  min-height: calc(100vh - 60px);
}

.search-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: none;
  margin-bottom: 20px;
  
  .search-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  // 搜索表单区域
  .search-form-section {
    .demo-form-inline {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: flex-end;
      
      .el-form-item {
        margin-bottom: 0;
        
        .el-input {
          border-radius: 8px;
          
          .el-input__wrapper {
            transition: all 0.3s ease;
            
            &:hover {
              box-shadow: 0 0 0 1px #409eff inset;
            }
          }
        }
        
        .el-select {
          .el-input__wrapper {
            border-radius: 8px;
            transition: all 0.3s ease;
            
            &:hover {
              box-shadow: 0 0 0 1px #409eff inset;
            }
          }
        }
        
        &.search-buttons {
          .el-button {
            margin-right: 8px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-1px);
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            }
            
            &.search-btn {
              background: linear-gradient(135deg, #409EFF 0%, #1989fa 100%);
              border: none;
              color: white;
              
              &:hover {
                background: linear-gradient(135deg, #1989fa 0%, #409EFF 100%);
              }
            }
            
            &.reset-btn {
              background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
              border: none;
              color: white;
              
              &:hover {
                background: linear-gradient(135deg, #F78989 0%, #F56C6C 100%);
              }
            }
          }
        }
      }
    }
  }
  
  // 操作按钮区域
  .action-buttons-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #ebeef5;
    
    .button-group {
      display: flex;
      gap: 10px;
      
      .el-button {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        &.add-btn {
          background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
          border: none;
          color: white;
          padding: 10px 20px;
          
          &:hover {
            background: linear-gradient(135deg, #85CE61 0%, #67C23A 100%);
          }
        }
        
        &.batch-delete-btn {
          background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
          border: none;
          color: white;
          
          &:hover:not(:disabled) {
            background: linear-gradient(135deg, #F78989 0%, #F56C6C 100%);
          }
          
          &:disabled {
            background: #c0c4cc;
            opacity: 0.6;
            cursor: not-allowed;
          }
        }
        
        &.template-btn {
          background: linear-gradient(135deg, #909399 0%, #B3B8C0 100%);
          border: none;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #B3B8C0 0%, #909399 100%);
          }
        }
        
        &.import-btn {
          background: linear-gradient(135deg, #E6A23C 0%, #F7BA2A 100%);
          border: none;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #F7BA2A 0%, #E6A23C 100%);
          }
        }
        
        &.export-btn {
          background: linear-gradient(135deg, #409EFF 0%, #1989fa 100%);
          border: none;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #1989fa 0%, #409EFF 100%);
          }
        }
        
        &.custom-export-btn {
          background: linear-gradient(135deg, #409EFF 0%, #1989fa 100%);
          border: none;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #1989fa 0%, #409EFF 100%);
          }
        }
      }
    }
  }
}

.list-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: none;
  
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    
    .el-table__header-wrapper {
      .el-table__header {
        th {
          background: #f8fafc;
          color: #606266;
          font-weight: 600;
          border-bottom: 1px solid #e4e7ed;
        }
      }
    }
    
    .el-table__body-wrapper {
      .el-table__body {
        tr:hover {
          background-color: #f8fafc;
        }
        
        td {
          border-bottom: 1px solid #ebeef5;
        }
      }
    }
    
    .el-button {
      border-radius: 6px;
      
      &.el-button--small {
        padding: 5px 12px;
      }
    }
    
    .el-button {
      border-radius: 6px;
      
      &.el-button--small {
        padding: 5px 12px;
      }
    }
  }
}

.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  
  .el-button {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    &.view-btn {
      background: linear-gradient(135deg, #909399 0%, #B3B8C0 100%);
      border: none;
      color: white;
      
      &:hover {
        background: linear-gradient(135deg, #B3B8C0 0%, #909399 100%);
      }
    }
    
    &.edit-btn {
      background: linear-gradient(135deg, #409EFF 0%, #1989fa 100%);
      border: none;
      color: white;
      
      &:hover {
        background: linear-gradient(135deg, #1989fa 0%, #409EFF 100%);
      }
    }
    
    &.delete-btn {
      background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
      border: none;
      color: white;
      
      &:hover {
        background: linear-gradient(135deg, #F78989 0%, #F56C6C 100%);
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #fff;
  border-radius: 0 0 12px 12px;
  
  :deep(.el-pagination) {
    .el-pager li {
      border-radius: 6px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      &.is-active {
        background: linear-gradient(135deg, #409EFF 0%, #1989fa 100%);
        color: white;
        border: none;
      }
    }
    
    .btn-prev,
    .btn-next {
      border-radius: 6px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.conveyor-pricing-form {
  padding: 20px;

  .form-card {
    margin-bottom: 15px;
    border-radius: 8px;
    transition: all 0.3s;
    overflow: hidden;
    border: 1px solid #ebeef5;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    :deep(.el-card__header) {
      padding: 10px 15px;
      background: linear-gradient(90deg, #f0f9eb, #e1f3d8);
      border-bottom: 1px solid #e1f3d8;
    }
    
    .form-header {
      font-size: 16px;
      font-weight: 600;
      color: #67c23a;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
        color: #67c23a;
      }
    }
  }
  
  :deep(.el-form-item__label) {
    color: #606266;
    font-weight: 500;
  }
  
  :deep(.el-input) {
    .el-input__inner {
      transition: all 0.3s;
      
      &:hover, &:focus {
        border-color: #67c23a;
      }
    }
  }
  
  :deep(.el-button--primary) {
    background-color: #67c23a;
    border-color: #67c23a;
    
    &:hover {
      opacity: 0.9;
    }
  }
}

:deep(.conveyor-pricing-dialog) {
  .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
    margin-right: 0;
    
    .el-dialog__title {
      color: #67c23a;
      font-weight: 600;
    }
  }
  
  .el-dialog__body {
    padding: 0;
  }
  
  .el-dialog__footer {
    border-top: 1px solid #ebeef5;
    padding: 15px 20px;
  }
}

.view-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
    
    .el-dialog__title {
      color: #409EFF;
      font-weight: 600;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .search-form {
    .el-form-item {
      margin-bottom: 10px;
    }
    
    .search-buttons {
      width: 100%;
      margin-left: 0;
      display: flex;
      justify-content: space-between;
    }
  }
  
  .table-card {
    height: calc(100vh - 230px);
  }
  
  .conveyor-pricing-form {
    padding: 10px;
  }
}

// 自定义导出弹窗样式
:deep(.export-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  
  .el-dialog__header {
    padding: 0;
    margin-right: 0;
    border-bottom: none;
  }
  
  .el-dialog__body {
    padding: 0;
  }
  
  .el-dialog__footer {
    padding: 0;
    border-top: none;
  }
}

.export-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 20px;
  color: white;
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .header-icon {
      font-size: 28px;
      background: rgba(255, 255, 255, 0.2);
      padding: 12px;
      border-radius: 50%;
      backdrop-filter: blur(10px);
    }
    
    .header-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .header-subtitle {
      font-size: 14px;
      opacity: 0.9;
    }
  }
  
  .selected-count {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.export-content {
  padding: 24px;
  
  .export-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    
    .toolbar-left {
      display: flex;
      gap: 12px;
      
      .el-button {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        &:disabled {
          transform: none;
          box-shadow: none;
        }
      }
    }
    
    .toolbar-right {
      :deep(.el-input) {
        .el-input__wrapper {
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          border: 1px solid #e2e8f0;
          transition: all 0.3s;
          
          &:hover, &.is-focus {
            border-color: #667eea;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
          }
        }
      }
    }
  }
  
  .field-list-container {
    .field-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      max-height: 400px;
      overflow-y: auto;
      padding-right: 8px;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
        
        &:hover {
          background: #94a3b8;
        }
      }
    }
    
    .field-card {
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      
      &:hover {
        border-color: #667eea;
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
      }
      
      &.selected {
        border-color: #667eea;
        background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
        
        .field-card-content {
          .field-name {
            color: #667eea;
            font-weight: 600;
          }
          
          .field-key {
            color: #4c51bf;
          }
        }
      }
      
      .field-card-content {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .field-checkbox {
          flex-shrink: 0;
          
          :deep(.el-checkbox__input) {
            .el-checkbox__inner {
              border-radius: 6px;
              border-width: 2px;
              width: 18px;
              height: 18px;
              
              &:hover {
                border-color: #667eea;
              }
            }
            
            &.is-checked .el-checkbox__inner {
              background-color: #667eea;
              border-color: #667eea;
            }
          }
        }
        
        .field-info {
          flex: 1;
          min-width: 0;
          
          .field-name {
            font-size: 15px;
            font-weight: 500;
            color: #1e293b;
            margin-bottom: 4px;
            word-break: break-all;
          }
          
          .field-key {
            font-size: 12px;
            color: #64748b;
            font-family: 'Monaco', 'Menlo', monospace;
            background: #f1f5f9;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
          }
        }
        
        .field-icon {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .check-icon {
            font-size: 18px;
            color: #667eea;
            animation: checkIn 0.3s ease;
          }
        }
      }
    }
    
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #64748b;
      
      .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
      }
      
      .empty-text {
        font-size: 16px;
      }
    }
  }
}

.export-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  
  .footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
    
    .el-icon {
      color: #3b82f6;
    }
  }
  
  .footer-buttons {
    display: flex;
    gap: 12px;
    
    .el-button {
      border-radius: 8px;
      font-weight: 500;
      padding: 12px 24px;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      }
      
      &.el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        
        &:hover {
          opacity: 0.9;
        }
        
        &:disabled {
          background: #e2e8f0;
          color: #94a3b8;
          transform: none;
          box-shadow: none;
        }
      }
      
      .el-icon {
        margin-right: 6px;
      }
    }
  }
}

@keyframes checkIn {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

// 响应式设计
@media (max-width: 768px) {
  :deep(.export-dialog) {
    width: 95vw !important;
    margin: 5vh auto;
  }
  
  .export-dialog-header {
    padding: 20px 16px 16px;
    
    .header-left {
      gap: 12px;
      
      .header-icon {
        font-size: 24px;
        padding: 10px;
      }
      
      .header-title {
        font-size: 18px;
      }
      
      .header-subtitle {
        font-size: 13px;
      }
    }
    
    .selected-count {
      padding: 6px 12px;
      font-size: 13px;
    }
  }
  
  .export-content {
    padding: 16px;
    
    .export-toolbar {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
      padding: 12px 16px;
      
      .toolbar-left {
        justify-content: center;
      }
      
      .toolbar-right {
        :deep(.el-input) {
          width: 100% !important;
        }
      }
    }
    
    .field-list-container {
      .field-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-height: 300px;
      }
      
      .field-card {
        padding: 12px;
        
        .field-card-content {
          gap: 10px;
          
          .field-info {
            .field-name {
              font-size: 14px;
            }
            
            .field-key {
              font-size: 11px;
            }
          }
        }
      }
    }
  }
  
  .export-footer {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    
    .footer-info {
      text-align: center;
      font-size: 13px;
    }
    
    .footer-buttons {
      width: 100%;
      justify-content: center;
      
      .el-button {
        flex: 1;
        padding: 10px 20px;
      }
    }
  }
}

@media (max-width: 480px) {
  .export-content {
    .field-list-container {
      .field-grid {
        max-height: 250px;
      }
    }
  }
}

// 价格和日期显示样式
.price-value {
  color: #E6A23C;
  font-weight: 600;
  font-size: 14px;
}

.date-value {
  color: #909399;
  font-size: 13px;
}

// 响应式设计
@media (max-width: 1200px) {
  .search-wrapper {
    .action-buttons-section {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
      
      .button-group {
        justify-content: center;
        flex-wrap: wrap;
      }
    }
  }
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  .search-wrapper {
    padding: 15px;
    
    .search-form-section {
      .demo-form-inline {
        flex-direction: column;
        align-items: stretch;
        
        .el-form-item {
          width: 100%;
          
          .el-input,
          .el-select {
            width: 100% !important;
          }
          
          &.search-buttons {
            display: flex;
            gap: 8px;
            
            .el-button {
              flex: 1;
              margin-right: 0;
            }
          }
        }
      }
    }
    
    .action-buttons-section {
      .button-group {
        .el-button {
          flex: 1;
          min-width: 0;
          text-align: center;
        }
      }
    }
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
    
    .el-button {
      width: 100%;
      margin: 0 !important;
    }
  }
}

// 自定义导出按钮样式
.custom-export-btn {
  background: linear-gradient(135deg, #409EFF, #1989fa);
  border: none;
  
  &:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
}

// 批量复制弹窗样式
.batch-copy-content {
  padding: 20px 0;
  
  .copy-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #409EFF;
    
    .info-icon {
      color: #409EFF;
      font-size: 18px;
    }
    
    span {
      color: #606266;
      font-size: 14px;
      
      strong {
        color: #409EFF;
        font-weight: 600;
      }
    }
  }
  
  .target-project-section {
    .section-label {
      display: block;
      margin-bottom: 8px;
      color: #606266;
      font-size: 14px;
      font-weight: 500;
    }
    
    .project-selector {
      .project-input {
        .el-input__wrapper {
          border-radius: 6px;
        }
        
        .el-input-group__append {
          background-color: #f5f7fa;
          border-color: #dcdfe6;
          
          .el-button {
            background: transparent;
            border: none;
            color: #409EFF;
            
            &:hover {
              background-color: rgba(64, 158, 255, 0.1);
            }
          }
        }
      }
    }
  }
}
</style>